<template>
    <div class="inspection-years">
        <el-button size="small" type="success" @click="visible = true">年检</el-button>
        <el-dialog title="年检" :visible="visible" width="60%" center :lock-scroll="true" :close-on-press-escape="false"
            :close-on-click-modal="false" @close="cancel">
            <el-form ref="form" label-width="160px">
                <el-form-item label="企业名称">
                    <el-input v-model="formData.enterpriseName" :disabled="true" />
                </el-form-item>
                <el-form-item label="证书名称">
                    <el-input v-model="formData.certificateTypeName" :disabled="true" />
                </el-form-item>
                <el-form-item label="证书编号">
                    <el-input v-model="formData.certificateNumber" :disabled="true" />
                </el-form-item>
                <el-form-item label="证书有效开始时间">
                    <el-date-picker v-model="formData.validityStartDate" type="date" format="yyyy-MM-dd" :disabled="true">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="证书有效截至时间">
                    <el-date-picker v-model="formData.validityEndDate" type="date" format="yyyy-MM-dd" :disabled="true">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="年检时间">
                    <el-date-picker v-model="time" type="date" format="yyyy-MM-dd" :pickerOptions="pickerOptions">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <span slot="footer">
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="handleSubmit">年检</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>

function getTimeStamp(date) {
    return new Date(date).getTime();
}

export default {

    props: {
        formData: {
            type: Object,
        },
    },

    data() {
        let self = this;
        return {
            visible: false,
            time: '',
            pickerOptions: {
                disabledDate(time) {
                    const temp = time.getTime()

                    const { validityStartDate, validityEndDate } = self.formData;

                    const startDate = new Date(validityStartDate);
                    startDate.setDate(startDate.getDate() + 365);

                    const endDate = new Date(validityEndDate);
                    endDate.setDate(endDate.getDate() + 365)

                    return temp < getTimeStamp(startDate) || temp > getTimeStamp(endDate)
                }
            }
        }
    },



    methods: {



        async handleSubmit() {

            if (!this.time) {
                return this.$message.error("请选择年检时间");
            }

            const url = `/api/enterprise-certificates/inspection-years`;

            const res = await this.$fetch.post(url, {
                id: this.formData.id,
                time: getTimeStamp(this.time),
            });

            if (res.code === 0) {
                this.$message.success("年检成功");
                this.cancel();

            }
        },

        cancel() {
            this.visible = false;
            this.$emit('refresh');
        },

    }
}
</script>



<style lang="less" scoped>
.inspection-years {
    display: inline-flex;
    margin-right: 8px;
}
</style>